<template>
  <div style="width: 100%; background-color: #f5f7f9">
    <IndexHeader
        ref="headerRef"
        :selectedIndex="1"
        @tabIndexChange="tabChangeHandle"
    ></IndexHeader>
    <Header @changeCenter="changeCenter" @openPopup="openPopup"></Header>
    <div class="container center-course ">
      <div class="flex-start-center" style="width: 100%; flex-wrap: wrap">
        <div v-for="(item, index) in data.courseList"
             :style="index != 0 && ((index + 1) % 4 == 0) ? 'margin: 28px 0' : 'margin: 28px 20px 28px 0'">
          <CourseCard :courseItem="item"></CourseCard>
        </div>
      </div>
    </div>
  </div>
  <course-dialog
      v-model:displayDio="data.displayDio"
      v-model:isLogin="data.isLogin"
      :wechat="data.wechat"
      @clickRefresh="clickRefresh"
  ></course-dialog>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import IndexHeader from "../../component/header.vue";
import CourseCard from "../../component/course-card.vue";
import {listGoods} from "../../../api/goods.js";
import Header from "@/views/course/component/header.vue";
import {configIndex, wechatUser} from "@/api/course.js";
import CourseDialog from "@/views/course/component/course-dialog.vue";

const router = useRouter();
const route = useRoute();
const headerRef = ref(null);
const data = reactive({
  hasInit: false,
  selectedIndex: 0,
  courseList: [],
  courseType: 0,
  isLogin: false,
  displayDio: false,
  type: 0,
  wechat: {},
  configIndex: {},
});
// 点击课程咨询弹窗
const openPopup = (type) => {

  data.type = type
  data.displayDio = true;
  clickRefresh(438)

};
const clickRefresh = (type, index) => {
  data.displayDio = true;
  headerRef.value.userIsLogin()
  wechatUser({addSource: type, courseType: data.courseType}, (res) => {
    data.wechat = res.data;
    data.displayDio = res.data.addWechatFlag == 1 ? false : true;

    if (index == 1) {
      data.displayDio = true;
    }
    return res.data.addWechatFlag == 1 ? false : true;
  });
  postConfigIndex()
};

function tabChangeHandle(index) {
  data.selectedIndex = index;
  // data.showIndex = true
  window.scrollTo({
    left: 0,
    top: 0,
  });
  headerRef.value.setSelectedIndex(index);
  if (index == 0 && !data.hasInit) {
    initData();
  }
}

const postConfigIndex = () => {
  let allData = {
    courseType: data.courseType,
    addSource: 438,
    userId: localStorage.getItem("id"),
  };
  configIndex(allData, (res) => {
    data.configIndex = res.data;
  });
};
const initData = () => {
  data.goodsList = [];
  listGoods({categoryId: data.courseType}, (res) => {
    data.courseList = res.data;
    data.courseList.map((item) => {
      item.type = "course";
    });
  });
};
onMounted(() => {
  data.courseType = route.query.courseType;
  //   判断是否登录
  data.isLogin = localStorage.getItem("token") ? true : false;
  initData();
});
const changeCenter = (item) => {
  for (let itemKey in item) {
    data[itemKey] = item[itemKey];
  }
  initData();
};
</script>

<style scoped></style>
